<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 个人中心 -->
    <link rel="stylesheet" href="../dece/css/de_user.css">
    <link rel="stylesheet" href="../dece/css/vue_component.css">
    
    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <script src="../dece/js/vue_component.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-transparent">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
        </header>
        <!-- 底部导航栏 -->
        <de-bar></de-bar>
        <!-- 个人中心 -->
        <div class="de_user">
            <div class="de_user_top">
                <div class="de_user_img">
                    <img :src="api_host + user.img">
                </div>
                <div class="de_user_info">
                    <span>{{user.nickname}}</span>
                    <span>{{user.mobile}}</span>
                </div>
            </div>
            <div class="de_user_mid">
                <div>
                    <a>{{user.point}}</a>
                    <label>积分</label>
                </div>
                <div>
                    <a>{{user.today_consume}}</a>
                    <label>今日消费</label>
                </div>
                <div>
                    <a>{{user.all_consume}}</a>
                    <label>全部消费</label>
                </div>
            </div>
            <div class="de_user_block">
                <div class="first">
                    <label>我的订单</label>
                    <a @click="order_list(6)">查看全部订单<i>></i></a>
                </div>
                <div class="list">
                    <div @click="order_list(0)">
                        <img src="../mui/svg/daifukuan.svg">
                        <span>待付款</span>
                    </div>
                    <div @click="order_list(1)">
                        <img src="../mui/svg/daifahuo.svg">
                        <span>待发货</span>
                    </div>
                    <div @click="order_list(2)">
                        <img src="../mui/svg/daishouhuo.svg">
                        <span>待收货</span>
                    </div>
                    <div @click="order_list(3)">
                        <img src="../mui/svg/yiwancheng.svg">
                        <span>已完成</span>
                    </div>
                </div>
            </div>
            <div class="de_user_block">
                <div class="first">
                    <label>其他服务</label>
                    <a>更多</a>
                </div>
                <div class="list">
                    <div @click="url('../home/address.html')">
                        <img src="../mui/svg/shouhuodizhi.svg">
                        <span>收货地址</span>
                    </div>
                    <div @click="hot">
                        <img src="../mui/svg/daifahuo.svg">
                        <span>热门抢购</span>
                    </div>
                    <div @click="hot">
                        <img src="../mui/svg/daishouhuo.svg">
                        <span>热门抢购</span>
                    </div>
                    <div @click="hot">
                        <img src="../mui/svg/yiwancheng.svg">
                        <span>热门抢购</span>
                    </div>
                </div>
                
            </div>
            <div class="de_button">
                <button @click="logout" class="button">退出</button>
            </div>
            <div style="min-height: 50px;"></div>
        </div>
        <de-alert :show="de_alert.show" :title="de_alert.title" :msg="de_alert.msg" :close="de_alert.close"></de-alert>
    </div>
    <!-- <script src="../mui/hello-mui/js/mui.min.js"></script> -->
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                api_host: de.api_host,
                user: {},
                de_alert: {},
            },
            created: function (){
                // 验证是否登陆
                if (!common.auth_login()) {
                    common.href("../login.html");
                }
                this.user_index();
            },
            mounted: function (){

            },
            methods: {
                // 获取会员信息
                user_index: function (){
                    var the = this;
                    var login = common.auth_login();
                    var params = {token:login};
                    // 提交数据
                    axios.post(de.api.user_index, params, de.header).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            the.user = dd.data;
                        } else {
                            common.logout(the);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 订单列表
                order_list: function ( key ){
                    common.href('../home/order.html?tid=' + key);
                },
                // 跳转地址
                url: function ( url ){
                    common.href(url);
                },
                // 暂时未开通
                hot: function (){
                    alert('暂未开通，敬请期待');
                },
                // 退出登陆
                logout: function(){
                    common.logout(this);
                }
            },
        });
    </script>
</body>

</html>